import React, { useRef, useEffect, useState } from 'react'
import { Table, Tag, Popconfirm, Input, message } from "antd";
import { Action, TableCard, SearchForm } from "../../../components";
import { getControllersList, Del_controllers, SetController } from "./service";
import { PlusOutlined, SearchOutlined, UndoOutlined } from '@ant-design/icons'
import AddModelPhysical from './AddModelPhysical'
const ControllerRegistration = () => {

    const [isFetching, setIsFetching] = useState(false);
    const [SearchParams, setSearchParams] = useState({
        controller_name: '',
    });

    useEffect(() => {
        getDataSource(SearchParams)

    }, []);

    const getDataSource = async (params) => {
        setIsFetching(true)
        getControllersList(params).then(data => {

            setDataSource(data.data.list)
            setIsFetching(false)
        })


    }



    const [dataSource, setDataSource] = useState([]);

    const [isModalOpen, setIsModalOpen] = useState(false);

    const [EditMsg, setEditMsg] = useState({})


    return (
        <div style={{ height: '90vh' }}>
            <SearchForm>
                <SearchForm.Item span={8} title="控制器名称">
                    <Input allowClear placeholder="请输入控制器名称" onChange={(e) => {
                        setSearchParams({
                            ...SearchParams,
                            controller_name: e.target.value
                        })
                        getDataSource({ controller_name: e.target.value })

                    }} />
                </SearchForm.Item>
            </SearchForm>
            <TableCard
                rowKey="id"
                dataSource={dataSource}
                loading={isFetching}
                onReload={getDataSource}

            // actions={[
            //     <>
            //         <Button
            //             type="primary"
            //             icon={<SearchOutlined />}
            //             onClick={() => {

            //             }}
            //         >搜索控制器
            //         </Button>
            //         <Button
            //             type="primary"
            //             icon={<UndoOutlined />}
            //             onClick={() => {

            //             }}
            //         >重连控制器
            //         </Button>
            //         {/* <Button
            //             type="primary"
            //             icon={<PlusOutlined />}
            //             onClick={() => {
            //                 setIsModalOpen(true)
            //             }}
            //         >新增物理区
            //         </Button> */}
            //     </>

            // ]}
            >
                <Table.Column title="物理区" dataIndex="physical_zone" render={(text) => (
                    <>{text + '区'}</>
                )} />
                <Table.Column title="控制器id" dataIndex="controller_id" />
                <Table.Column title="控制器名称" dataIndex="controller_name" />
                <Table.Column title="IP地址" dataIndex="ip_address" />
                <Table.Column title="在线状态" dataIndex="is_online" render={(text) => {
                    return (
                        <Tag color={text ? "green" : "red"}>{text ? "在线" : "离线"}</Tag>
                    )
                }} />
                <Table.Column title="是否已注册" dataIndex="is_initialized" render={(text) => (
                    <Tag color={text ? "green" : "red"}>{text ? "已注册" : "未注册"}</Tag>
                )} />
                <Table.Column title="物理位置" dataIndex="location" />

                <Table.Column title="备注" dataIndex="note" />
                <Table.Column title="上线时间" dataIndex="online_time" />
                <Table.Column title="版本号" dataIndex="version" />




                <Table.Column width={180} title="操作" render={info => (
                    <Action>

                        <Action.Button onClick={() => {
                            setIsModalOpen(true)
                            setEditMsg(info)
                        }} >编辑</Action.Button>

                        <Action.Button onClick={async () => {
                            console.log(info)


                            // console.log("提交",data)
                            // return
                            if (info.controller_id == "") return message.error("请先编辑控制器")
                            let res = await SetController({
                                controller_id: info.controller_id,
                                controller_name: info.controller_name,
                                physical_zone: info.physical_zone
                            })
                            if (res.result != 0) return message.error(res.msg)
                            message.success("在注册成功")
                        }} >在注册</Action.Button>
                        <Popconfirm placement="top" title={`是否删除控制器${info.controller_name}`} onConfirm={() => {
                            Del_controllers(info.id).then((res) => {
                                console.log(res)

                                if (res.code == 0) {
                                    message.success("删除成功")
                                    getDataSource(SearchParams)

                                } else {
                                    message.error("删除失败")
                                }

                            })
                        }} okText="删除" cancelText="取消">
                            <Action.Button danger


                            >删除</Action.Button>
                        </Popconfirm>

                    </Action>
                )} />
            </TableCard>
            {
                isModalOpen && <AddModelPhysical EditMsg={EditMsg} setEditMsg={setEditMsg} getDataSource={getDataSource} isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
            }

        </div>
    )
}

export default ControllerRegistration